<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
	
	<style>	
		*{
			margin:0;
			padding:0;
			list-style:none;
			box-sizing:border-box;
		}
		.wrap{
			width:500px;
			margin:150px auto;
			border:1px solid #ccc;
			padding:20px;
		}
		.header textarea{
			width:100%;
			height:100px;
			padding:10px;
		}
		
		.header button{
			float:right;
		}
		
		.main{
			margin-top:20px;
			border:1px solid #ccc;
			padding:10px;
			max-height:500px;
			overflow:auto;
		}
		
		ul li{
			border-bottom:1px solid #ccc;
			padding:10px 0;
		}
	</style>
</head>

<body>
	<div class="wrap">
		<header class="header">
			<h2>请留言::!!</h2>
			<textarea class="userMes"></textarea>
			<span>100</span>字
			<button class="submit">发表！</button>
		</header>
		
		<main class="main">
			<ul>
				<li>吴龙腾迟到了！！！！</li>
				<li>吴龙腾迟到了！！！！</li>
				<li>吴龙腾迟到了！！！！</li>
			</ul>
		</main>
	</div>
	
	<script>
		var submit = document.querySelector(".submit"),
			userMes = document.querySelector(".userMes"),
			ul = document.querySelector("ul"),
			span = document.querySelector("span");
		
		
		
		submit.onclick = function (){
			// 点击获取文本域内容
			var val = userMes.value;
			// 不能为空
			if(val.trim() === ""){
				alert("不能为空")
				return ;
			}
			console.log(val.length)
			if(val.length > 100){
				alert("最多输入100个字符")
				return ;
			}
			
			// 创建LI节点
				var li  = document.createElement("li");
				li.innerHTML = val;
				// ul.appendChild(li)
				ul.insertBefore(li,ul.firstElementChild)
				
			// 清空内容
				userMes.value = ""
				span.innerHTML = 100
		}
		
		userMes.oninput = function (){
			if(100 - userMes.value.length<0){
				userMes.value = userMes.value.substr(0,100)
			}else{
				span.innerHTML = 100 - userMes.value.length
			}
			
		}
		
		
	
	</script>
</body>

</html>